import { ReactComponentExt } from '@helpers/ReactExt'
import utils from '@helpers/utils'
import { BaseProps } from '@store/store'
import { Button, Card, Col, Empty, Row } from 'antd'
import { configs } from 'config'
import moment from 'moment'
import * as React from 'react'
import { Link } from 'react-router-dom'
import * as styles from './danceClassList.less'

// tslint:disable-next-line:no-empty-interface
export interface DanceClassListProps extends BaseProps { }

interface DanceClassListState {
  list: ViewModels.DanceClassData[]
}

export class DanceClassList extends ReactComponentExt<DanceClassListProps, DanceClassListState> {
  public init(): void {
    this.state = {
      list: []
    }
    // throw new Error('Method not implemented.')
    this.getSubjectList()
    this.jumpCreateSubjectPage = this.jumpCreateSubjectPage.bind(this)
  }

  public render() {
    return (
      <div className={styles.danceClassListPage}>
        <Card title='学校班级介绍' extra={this.genCardExtraForCreateSubjectBtn()}>
          <Row className='row'>
            <Col className='col'>
              {this.renderDanceClassPanel()}
            </Col>
          </Row>
        </Card>
      </div>
    )
  }

  private genCardExtraForCreateSubjectBtn() {
    return (
      <Button
        icon='plus'
        type='primary'
        onClick={this.jumpCreateSubjectPage}
      >
        创建班级科目
      </Button>
    )
  }

  private jumpCreateSubjectPage() {
    this.props.history!.push('/subject/create')
  }

  private async getSubjectList() {
    const { data: { list } } = await this.api.getDanceClassList(0, 10)
    if (list.length === 0) {
      return
    }
    const subjects = list.map<ViewModels.DanceClassData>((item) => {
      const { name, cover, schooltime } = item
      return {
        ...item,
        dspSchooltime: schooltime ? moment(schooltime) : null,
        dspCoverFile: utils.convertToAntdFile(name, [cover])
      }
    })
    this.setState({ list: subjects })
  }

  private genCardExtraForCheck(id: number) {
    return (
      <React.Fragment>
        <Link className={styles.link} to={`/subject/create?action=look&subject_id=${id}`}>查看</Link>
        <Link className={styles.link} to={`/subject/create?action=edit&subject_id=${id}`}>编辑</Link>
        <Link className={styles.link} to={`/subject/record?subject_id=${id}`}>上传记录</Link>
      </React.Fragment>
    )
  }

  private renderDanceClassPanel() {
    const { list } = this.state
    if (list.length === 0) {
      return <Empty description='暂无数据' />
    }
    return list.map((item) => {
      const { name, cover, id } = item
      return (
        <Card className={styles.antdCard} title={name} key={id} extra={this.genCardExtraForCheck(id)}>
          <img src={`${configs.apiHost}${cover}`} className={styles.cover} />
        </Card>
      )
    })
  }
}
